<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{},~{})">
    <title>后台管理系统</title>
    <style>
    </style>
</head>
<body>
<div id="maindiv" class="maindiv mainPadding" style="display: none;">    
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        <el-breadcrumb-item>资源分配表</el-breadcrumb-item>
    </el-breadcrumb>    
    <el-row class="marginB20">
        <el-button type="primary" @click="searchYesterday" :disabled="btnDisabled">昨天</el-button>
        <el-button type="success" @click="searchWeek" :disabled="btnDisabled">近七天</el-button>
        <el-button type="warning" @click="searchMonth" :disabled="btnDisabled">本月</el-button>
        <shiro:hasPermission name="statistics:teleStatement:resourceAllocation:export">
        <el-button type="danger" @click="exportRs">导出Excel报表</el-button>
        </shiro:hasPermission>
        <el-button type="primary" style="float: right;" @click="goback()">返回</el-button>  
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
           <el-form :inline="true" :model="form" class="demo-form-inline mainSearchForm" ref="form">                 
                <el-form-item label="起止时间:">
                    <el-date-picker format="yyyy-MM-dd HH:mm" v-model="form.startTime" type="datetime" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                   <el-date-picker format="yyyy-MM-dd HH:mm" v-model="form.endTime" type="datetime" placeholder="选择日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="电销组:">  
                    <el-select v-model="form.org_Id" placeholder="电销组" style="width: 100%;" clearable @change="currentTelSale" filterable :disabled="isDisabled">
                        <el-option
                            v-for="item in orgTeleArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销顾问:">  
                    <el-select v-model="form.user_Id" placeholder="电销顾问" style="width: 100%;" filterable clearable>
                        <el-option
                            v-for="item in busSaleArr"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分配来源:">  
                    <el-select v-model="form.new_resource" placeholder="分配来源" style="width: 100%;" clearable filterable>
                        <el-option
                            v-for="item in distributionSource"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable(1)" class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <!-- <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span> -->
                </div>  
            </el-form>
        </div>
        <el-row>
            <el-table 
                ref="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="tableData"
                v-loading="loading"
                >
                <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
                <el-table-column align="center" :key="index" :prop="item.fieldCode" :label="item.displayName" v-for="(item,key,index) in tableColums">
                </el-table-column>
            </el-table>
            <table-pagination :pager="pager" @change="searchTable()"></table-pagination>
        </el-row>
    </div>
</div>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
</body>
<script th:inline="javascript">
    var queryOrg=[[${saleGroupList}]];//电销组
    // var distributionSource=[[${queryOrg}]];//分配来源
    var resourceQueryDto=[[${resourceAllocationQueryDto}]];//参数list
    var fieldList=[[${fieldList}]];//表头list
    var curOrgId = [[${curOrgId}]];//当前电销组
    var mainDivVM = new Vue({
        el: '#maindiv',
        data: function() {
            return {
                loading:false,
                isDisabled:false,
                form: {
                    startTime:'',
                    endTime:'',
                    org_Id:'',
                    user_Id:'',
                    new_resource:''
                },
                export: {
                    startTime:'',
                    endTime:'',
                    org_Id:'',
                    user_Id:'',
                    new_resource:''
                },
                tableData: [],//表格数据
                tableColums: [],//表头list
                orgTeleArr:queryOrg,//电销组
                busSaleArr:[],//创业顾问
                distributionSource:[{
                    id:1,
                    name:'话务新资源'
                },{
                    id:2,
                    name:'推广新资源'
                },{
                    id:3,
                    name:'非新资源'
                }],//分配来源
                pager:{
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
            }             
        },
        methods: {  
            currentTelSale(seleVal){//根据电销组选择创业顾问
                if(null==seleVal||seleVal==""){
                    return ;
                }
                param={};
                param.orgId=seleVal;
                param.roleCode="DXCYGW";
                axios.post('/user/userManager/listByOrgAndRole' ,param).then(function (response) {  
                    mainDivVM.busSaleArr=response.data.data;
                });
            },
            searchTable(pageNumOne) { 
                var startTime=this.form.startTime;
                var endTime=this.form.endTime;
                if(endTime && startTime){
                    startTime = new Date(this.form.startTime);
                    endTime = new Date(this.form.endTime);
                    if(startTime>endTime){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                        });
                        return;
                    }
                    var date = new Date();
                    var currentDate = moment(date).format("YYYY-MM-DD 23:59");
                    date.setMonth(date.getMonth()-6);
                    var beforeSixMonth = moment(date).format("YYYY-MM-DD 00:00");
                    var currentDateRes = new Date(currentDate);
                    var beforeSixMonthRes = new Date(beforeSixMonth);
                    if(new Date(startTime) < beforeSixMonthRes || new Date(endTime) > currentDateRes){
                        this.$message({
                            message: '请选择近6个月内的时间',
                            type: 'warning'
                        });
                        return;
                    }
                    startTime = this.limitTime(startTime, null);
                    endTime = this.limitTime(null, endTime);
                }else{
                    this.$message({
                        message: '请选择起止时间',
                        type: 'warning'
                    });
                    return;
                }
                var param = {};
                param.pageSize = this.pager.pageSize;
                // param.pageNum =  this.pager.currentPage;
                if(pageNumOne){
                    param.pageNum = pageNumOne;
                }else{
                    param.pageNum = this.pager.currentPage;
                }
                // 搜索条件
                param.startTime = this.minuteFormat(startTime);
                param.endTime = this.minuteFormat(endTime);
                param.org_Id = this.form.org_Id;//电销组
                param.user_Id = this.form.user_Id;//电销顾问
                param.new_resource = this.form.new_resource;//分配来源
                this.loading=true;
                axios.post('/statistics/teleStatement/getResourceAllocationsDayPersion',param).then(function (response) {
                    if(!response){
                        mainDivVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        return ;
                    }
                    var resobj= response.data;
                    if(!resobj){
                        mainDivVM.$message({
                            message: "接口调用失败",
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        return ;
                    }
                    if(resobj.code!='0'){
                        mainDivVM.$message({
                            message: resobj.msg,
                            type: 'error'
                        });
                        mainDivVM.loading=false;
                        return ;
                    }  
                    var resobjData=resobj.data.data          
                    // 表格数据渲染
                    mainDivVM.tableData=resobjData;
                    // 表头数据渲染 
                    mainDivVM.tableColums= fieldList;
                    // 日期格式转换
                    for(var i=0;i<resobjData.length;i++){
                        if(resobjData[i].day){
                            resobjData[i].day=mainDivVM.dateFormat(resobjData[i].day);
                        }                        
                    }
                    // 分页
                    mainDivVM.pager.currentPage= resobj.data.currentPage;
                    mainDivVM.pager.total= resobj.data.total;
                    // loading
                    mainDivVM.loading=false;
                    // 给导出参数赋值
                    mainDivVM.export.startTime = mainDivVM.minuteFormat(startTime);
                    mainDivVM.export.endTime = mainDivVM.minuteFormat(endTime);
                    mainDivVM.export.org_Id = mainDivVM.form.org_Id;
                    mainDivVM.export.user_Id = mainDivVM.form.user_Id;
                    mainDivVM.export.new_resource = mainDivVM.form.new_resource;
                })  
            },
            goback(){
                // 返回资源分配表页面
                window.location.href="/statistics/teleStatement/resourceAllocation";
            },
            dateFormat (column) { 
                // console.log(column)                
                 if (!column) {return "";}
                var d = column.toString();
                var oYear = d.slice(0,4);
                var oMonth = d.slice(4,6);
                var oDay = d.slice(6);
                return oYear+"-"+oMonth+"-"+oDay;
            }, 
            minuteFormat (m) {
                if (!m) {
                   return "";
                 }
                return moment(m).format("YYYYMMDDHHmm");
            },
            dateTimeFormat (dt) { 
                if (!dt) {return "";}
                var d = dt.toString();
                var oYear = d.slice(0,4);
                var oMonth = d.slice(4,6);
                var oDay = d.slice(6,8);
                var oHour = d.slice(8,10);
                var oMinute = d.slice(10);
                return oYear+"-"+oMonth+"-"+oDay+" "+oHour+":"+oMinute;
            },
            limitTime (start, end) {
                var startTime = this.minuteFormat (start);
                var endTime = this.minuteFormat (end);
                var date = new Date();
                data = this.minuteFormat (date);// 现在的时间
                data = data.slice(0,8);
                if(startTime){
                    var s = startTime.slice(0,8);
                    if(s < data){
                        this.form.startTime = moment(start).format("YYYY-MM-DD 00:00");
                        return this.form.startTime;
                    }
                    return start;
                }
                if(endTime){
                    var e = endTime.slice(0,8);
                    if(e < data){
                        this.form.endTime = moment(end).format("YYYY-MM-DD 23:59");
                        return this.form.endTime;                        
                    }
                    return end;
                }
            },
            searchYesterday(){//昨天
                this.btnDisabled=true;
                var today = new Date();
                today.setTime(today.getTime()-24*60*60*1000);
                var startTime = today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate()+" 00:00";
                var endTime =today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate()+" 23:59";
                this.form.startTime=startTime;
                this.form.endTime=endTime;
                this.searchTable(1);
            },
            searchWeek(){//近七天
                this.btnDisabled=true;
                var a = new Date();
                var year = a.getFullYear();
                var month = a.getMonth();
                var date = a.getDate();
                var b = new Date(year,month,date);
                var c = b.valueOf()-6*24*60*60*1000;
                // var d = b.valueOf()+1*24*60*60*1000;
                var d = b.valueOf();
                var startTime= new Date(c);
                var endTime = new Date(d);
                this.form.startTime=startTime.getFullYear()+"-" + (startTime.getMonth()+1) + "-" + startTime.getDate()+" 00:00";
                this.form.endTime=endTime.getFullYear()+"-" + (endTime.getMonth()+1) + "-" + endTime.getDate()+" 23:59";
                this.searchTable(1);
            },
            searchMonth(){//本月
                this.btnDisabled=true;
                var a = new Date();
                var year = a.getFullYear();
                var month = a.getMonth();
                var date = a.getDate();
                var b = new Date(year,month,date);
                var f= new Date(year,month,01);
                var c = f.valueOf();
                //  var d = b.valueOf()+1*24*60*60*1000;
                var startTime= new Date(c);
                // var endTime = new Date(d);
                this.form.startTime=startTime.getFullYear()+"-" + (startTime.getMonth()+1) + "-" + startTime.getDate()+" 00:00";;
                this.form.endTime=year+"-"+(month+1)+"-"+date+" 23:59";
                this.searchTable(1);
            },
            exportRs(){
                var param = {};
                // 搜索条件
                param.startTime = this.export.startTime;
                param.endTime =  this.export.endTime;
                param.org_Id =  this.export.org_Id;//电销组
                param.user_Id =  this.export.user_Id;//电销顾问
                param.new_resource =  this.export.new_resource;//分配来源
                axios.post('/statistics/teleStatement/exportResourceAllocationDayPersion',param,{responseType:'blob'})
                    .then(function (response) {
                        var data =  response.data;
                        var fileName = response.headers.filename;
                        saveAs(data,decodeURI(fileName));
                    })
                    .catch(function (error) {
                        console.log(error);
                    }).then(function(){
                });
            }
        },
        created(){    
            // 接收参数
            this.form.startTime=this.dateTimeFormat(resourceQueryDto.startTime);
            this.form.endTime=this.dateTimeFormat(resourceQueryDto.endTime);
            this.form.org_Id=resourceQueryDto.org_Id;
            this.form.new_resource=resourceQueryDto.new_resource;

            this.export.startTime=resourceQueryDto.startTime;
            this.export.endTime=resourceQueryDto.endTime;
            this.export.org_Id=resourceQueryDto.org_Id;
            this.export.new_resource=resourceQueryDto.new_resource;
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            if(curOrgId){this.isDisabled= true;}
            this.currentTelSale(this.export.org_Id);
            this.searchTable();
        },
        mounted(){
            document.getElementById('maindiv').style.display = 'block';
        }
    })
    
</script>
</html>